<template>
  <div> 
     <van-swipe-cell v-for="item in numberlist" :key="item.id">
    <van-nav-bar
      title="志愿活动"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
     
    <div style="background-color:white; width: 100%; height: 400px">
    
      <div><img class="haibao" src="../assets/baoming3.jpg" alt="" /></div>
      <div class="wenzi"><h4>{{item.content}}</h4></div>
      <span class="tupian"><van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /></span>
      <span class="wenzi3">{{item.num}}</span>
      <span class="tupian2"><van-icon name="location-o" /></span>
      <span class="wenzi4">{{item.location}}</span>
      <button @click="canjia">
      <span><van-button class="button1" type="danger">参加</van-button></span>
      </button>
    </div>
   
    <div class="divHeight"></div>
     </van-swipe-cell>

  </div>
</template>

<script>
import axios from "axios";
export default {
 data(){
   return{
   numberlist:[],
  }
 },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    canjia(){
      this.$router.push("/zhiadd");
    }
  },
  created() {
      axios
        .get("/api/zhanshow.php")
        .then((response) => {
          this.numberlist = response.data.data;
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
};
</script>

<style>
.divHeight {
  width: 100%;
  height: 20px;
  background-color:rgb(240, 236, 232);
  position: relative;
  overflow: hidden;
}
.haibao {
    position: absolute;
    top: 60px;
    left: 25px;
    float: left;
    width: 90%;
    height: 300px;
    border-radius: 5%;
}
.haibao2 {
    position: absolute;
    top: 480px;
    left: 25px;
    float: left;
    width: 90%;
    height: 300px;
    border-radius: 5%;
}
.wenzi{
  position: absolute;
  top: 350px;
left: 15px;
width: 60%;
}
.wenzi2{
position: absolute;
top: 770px;
left: 15px;
width: 60%;
}
.wenzi3{
position: absolute;
top:398px;
left:40px;
}
.wenzi4{
position: absolute;
top:398px;
left:44%;
}
.wenzi5{
    position: absolute;
  top: 818px;
  left: 40px;
}
.wenzi6{
  position: absolute;
top:820px;
left:44%;
}
.tupian{
  position: absolute;
  top: 400px;
left: 15px;

}

.tupian2{
 position: absolute;
  top: 400px;
left:40%;
}
.tupian3{
  position: absolute;
  top: 820px;
  left: 15px;
}
.tupian4{
   position: absolute;
  top: 820px;
left:40%;
}

.button1{
   position: absolute;
  top: 380px;
left: 80%;
}

</style> 